<template>
  <div class="theme-switcher">
    <el-dropdown trigger="click" @command="handleThemeChange">
      <span class="theme-trigger">
        <el-icon><Sunny /></el-icon>
        <span class="theme-name">{{ currentTheme.name }}</span>
        <el-icon><ArrowDown /></el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item 
            v-for="theme in availableThemes" 
            :key="theme.id"
            :command="theme.id"
            :class="{ 'is-active': currentThemeId === theme.id }"
          >
            <div class="theme-item">
              <span class="theme-color" :style="{ backgroundColor: theme.colors.primary }"></span>
              <span>{{ theme.name }}</span>
            </div>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { Sunny, ArrowDown } from '@element-plus/icons-vue';
import { useThemeStore } from '../stores/theme';

// 获取主题状态管理
const themeStore = useThemeStore();

// 计算属性
const currentTheme = computed(() => themeStore.currentTheme);
const currentThemeId = computed(() => themeStore.currentThemeId);
const availableThemes = computed(() => themeStore.availableThemes);

// 切换主题
const handleThemeChange = (themeId: string) => {
  themeStore.setTheme(themeId);
};
</script>

<style scoped>
.theme-switcher {
  display: inline-block;
  margin-left: 15px;
}

.theme-trigger {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.theme-trigger:hover {
  background-color: var(--el-fill-color-light);
}

.theme-name {
  margin: 0 5px;
  font-size: 14px;
}

.theme-item {
  display: flex;
  align-items: center;
}

.theme-color {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  margin-right: 8px;
}

.is-active {
  color: var(--el-color-primary);
  font-weight: bold;
}
</style>